<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://eureka.yigolden.net/stringutils/sutaglib/1.0" prefix="su"%>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

    <title>发表帖子</title>

    <!-- Bootstrap core CSS -->
    <link href="<%=request.getContextPath() %>/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="<%=request.getContextPath() %>/static/css/signin.css" rel="stylesheet">
    <link href="<%=request.getContextPath() %>/static/css/summernote.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="<%=request.getContextPath() %>/static/js/html5shiv.min.js"></script>
      <script src="<%=request.getContextPath() %>/static/js/respond.min.js"></script>
    <![endif]-->

  </head>

  <body>

<jsp:include page="../Common/navHeader.jsp"></jsp:include>
  <div class="container">
	<h1 style="font-family:华文行楷;" >好室友<small>网</small> </h1>
    <div class="row">
		<div class="col-sm-2">
		</div>
		<div class="col-sm-8">
		<form id="addpostForm" class="form-horizontal" method="post">
        <input type="hidden" name="action" value="posting" />    
         
  		<div class="form-group">
  		<div class="col-sm-3">
  			<select class="form-control" id="type" name="type">
  				<option value="0">选择类型</option>
  				<option value="1">本版公告</option>
  				<option value="2">新人报到</option>
  				<option value="3">床位出租</option>
  				<option value="4">床位招租</option>
  				<option value="5">其他信息</option>
			</select>
		</div>
		<div class="col-sm-9">
      		<input type="text" class="form-control" id="topic" name="topic" placeholder="主题……">
    	</div>
		</div>  
  		
  		<div class="form-group">
  			<div class="col-sm-12">
  				<div class="summernote" id="summernote"></div>
  				<input type="hidden" id="content" name="content" value="" />
  			</div>
  		</div>
  				
  		<div class="form-group">
    		<div class="col-xs-12">
      			<div class="col-xs-6 text-right">
     				 <button type="submit" class="btn btn-success">确认发表</button>
     		    </div>
      			<div class="col-xs-6 text-left">
      				<button type="reset" class="btn btn-warning">重新填写</button>
      			</div>	
    		</div>
    		
    		<div class="col-sm-12">
    		 <c:if test="${errorCode eq 1 }">
          		<div class="alert alert-warning" role="alert" id="alert-warning">发表失败！</div>
        	</c:if>

        	<c:if test="${successCode eq 1 }">
          		<div class="alert alert-warning" role="alert" id="alert-warning">发表成功！</div>
        	</c:if>  
        	</div>
  		</div>
        
        
        <input type="hidden" name="referrer" value="${fn:escapeXml(referer) }" />
        
      </form>
      </div>
      <div class="col-sm-2"></div>
     </div>

    </div> <!-- /container -->

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="<%=request.getContextPath() %>/static/js/ie10-viewport-bug-workaround.js"></script>
    <script src="<%=request.getContextPath() %>/static/js/jquery.min.js" ></script>
    <script src="<%=request.getContextPath() %>/static/js/bootstrap.min.js"></script> 
	<script src="<%=request.getContextPath() %>/static/js/summernote.min.js" ></script>
	<script src="<%=request.getContextPath() %>/static/js/summernote-zh-CN.js" ></script>
	
	<script>
	function validateForm(){
		var topic = document.getElementById("topic");	
		var type=document.getElementById("type");
		var content = document.getElementById("content");
		
		if(type.value==0){
			alert("类型不能为默认项！");
			type.focus();
			return false;
		}
		
		if(topic.value==""){
			alert("主题不能为空！");
			topic.focus();
			return false;
		}
		
				
		if($('#summernote').summernote('isEmpty')){
			alert("内容不能为空！");
			content.focus();
			return false;
		}
		if($('#summernote').summernote('code').length>10000){
			alert("内容超过10000，请适当精简！");
			content.focus();
			return false;
		}
				
		return true;
	}
	
		$(document).ready(function() {
		    $('#summernote').summernote({
		        height: 200,
		        minHeight: 200,
		        lang: 'zh-CN',
		        placeholder: '发挥你的想象力，畅所欲言吧！',
		        toolbar: [
		                  ['style', ['bold', 'italic', 'underline', 'clear']],
		                  ['font', ['strikethrough', 'superscript', 'subscript']],
		                  ['color', ['color']],
		                  ['para', ['ul', 'ol', 'paragraph']]
		                ]
		    });
		    
		    $("#addpostForm").submit(function() {
		    	if (!validateForm())
		    		return false;
		    	$("#content").val($('#summernote').summernote('code'));
		    	return true;
		    });
		});
		
		
	</script>
  </body>
</html>